<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group />
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <div class="salary-head">
          <span class="salary-title"><span class="border"></span>工资月度统计</span>
          <el-select v-model="yearCount" placeholder="请选择" style="width: 80px" size="mini" @change="changeYearCount">
            <el-option
              v-for="(val, index) in selectData"
              :key="index"
              :label="val.label"
              :value="val.value"
            >
            </el-option>
          </el-select>
        </div>
        <SalaryLineChart :salaryData="salaryData" />
      </el-row>
      <el-row :gutter="8">
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
          <div class="chart-wrapper">
            <div class="salary-head">
              <span class="salary-title"><span class="border"></span>工资年度统计</span>
            </div>
            <SalaryPieChart />
          </div> 
        </el-col>
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="margin-bottom:30px;">
          <div class="chart-wrapper">
            <div class="salary-head">
              <span class="salary-title"><span class="border"></span>节日福利年度统计</span>
            </div>
            <BenefitsBarChart />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import SalaryLineChart from './components/SalaryLineChart'
import SalaryPieChart from './components/SalaryPieChart'
import BenefitsBarChart from './components/BenefitsBarChart'

export default {
  name: 'Dashboard',
  components: { PanelGroup, SalaryLineChart, SalaryPieChart, BenefitsBarChart },
  data() {
    return {
      yearCount: 2,
      salaryData: []
    };
  },
  mounted() {
    this.getSalaryData();
  },
  methods: {
    changeYearCount(val) {
      this.getSalaryData();
    },
    getSalaryData() {
      this.getRequest(`/salary/analyze/salary-month-line/${this.yearCount}`).then(resp => {
        if (resp) {
          this.salaryData = resp.data;
        }
      });
    }
  },
  computed: {
    selectData() {
      let options = [
        { label: '一年', value: 0 },
        { label: '两年', value: 1 },
        { label: '三年', value: 2 },
        { label: '五年', value: 4 },
        { label: '全部', value: -1 }
      ];

      return options;
    }
  }
}
</script>

<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

<style lang="scss">

.dashboard-editor-container {
  .salary-head {
    display: flex;
    justify-content: space-between;
    height: 28px;
    line-height: 28px;
    margin-bottom: 10px;

    .salary-title {
      font-size: 13px;
      .border {
        border-left: 5px solid #409EFF;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
}

</style>
